<template>
  <div class="app-container">
    <pro-table
      ref="pageBox"
      title="操作记录"
      :request="getList"
      :columns="columns"
      :search="searchObj"
    >
      <template #expand="{ row }">
        <div>{{ row.message }}</div>
      </template>
      <template #date="{ row }">
        {{ row.createTime | parseTime }}
      </template>
    </pro-table>
  </div>
</template>
<script>
export default {
  name: 'Operation',
  data() {
    return {
      columns: [
        {
          type: 'expand',
          tdSlot: 'expand',
        },
        {
          label: '用户名',
          prop: 'userId',
        },
        {
          label: '邮箱',
          prop: 'email',
        },
        {
          label: 'IP',
          prop: 'ip',
        },
        {
          label: '产品',
          prop: 'product',
        },
        {
          label: '操作类型',
          prop: 'type',
        },

        {
          label: '操作时间',
          tdSlot: 'date',
          align: 'center',
          width: 160,
        },
      ],
      searchObj: {
        inputWidth: '200px',
        fields: [
          {
            type: 'select',
            label: '',
            name: 'product',
            placeholder: '产品',
            options: [
              {
                value: 'PASSPORT',
                name: '账号',
              },
              {
                value: 'MESSENGER',
                name: '消息平台',
              },
              {
                value: 'CHATBOT',
                name: '聊天机器人',
              },
            ],
          },
          {
            type: 'select',
            label: '',
            name: 'type',
            placeholder: '操作类型',
            options: [
              {
                value: 'LOGIN',
                name: '登录',
              },
              {
                value: 'CREATE',
                name: '创建',
              },
              {
                value: 'MODIFY',
                name: '修改',
              },
              {
                value: 'DELETE',
                name: '删除',
              },
            ],
          },

          {
            type: 'text',
            label: '',
            name: 'keyword',
            placeholder: 'IP、内容',
          },
        ],
      },
    }
  },

  methods: {
    async getList(params) {
      const { code, data } = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            code: 200,
            data: {
              list: [
                {
                  createTime: '2022-03-23T03:48:08.000+00:00',
                  enterpriseId: '141598637888113837',
                  id: '227477127446921377',
                  ip: '175.0.60.128',
                  message:
                    'Login, enterprise id = 141598637888113837, user id = 141598637888113838',
                  product: 'PASSPORT',
                  type: 'LOGIN',
                  userId: '141598637888113838',
                },
              ],
              total: 100,
            },
          })
        }, 500)
      })
      if (+code === 200) {
        return {
          data: data.list,
          total: +data.total,
        }
      }

      return {
        data: [],
        total: 0,
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
